<template>

	<view class="container">
		<view class="home-page-swiper">
			<swiper class="swiper" :current="current" :vertical='true' :duration="duration" @change="swiperChange" easing-function='easeInOutCubic'>
				<swiper-item v-for="(item,index) in swiperList.imdexAudiCarList" :key="'homeSwiper' + index">
					<view class="swiper-item" :class="'item-' + index">
						<view class="item-image">
							<image :src="item.CarImage" mode=""></image>
						</view>
						
						
						<view class="item-top">
							
							<view class="item-title">{{swiperList.indexRecarTite}}</view>
							<view class="item-subTitle">{{swiperList.indexReCarSV}}</view>
							<view class="item-carType">{{item.CarBrandID + item.CarModelName}}</view>
							<view class="item-leaseInfo">
								<view class="item-leaseInfo-item item-leaseInfo-itembefore">
									<view class="lease-item">{{item.DateReCar}}</view>
									<view class="lease-item">{{'超低日租'}}</view>
								</view>
								<view class="item-leaseInfo-item item-leaseInfo-itembefore">
									<view class="lease-item">{{item.ReCarST}}</view>
									<view class="lease-item">{{'最低起租'}}</view>
								</view>
								<view class="item-leaseInfo-item item-leaseInfo-itembefore">
									<view class="lease-item">{{item.ReCarOC}}</view>
									<view class="lease-item">{{'最低起租'}}</view>
								</view>

							</view>
							<navigator url="../subscription/index" hover-class="navigator-hover">
								<button
									style=" border: 4rpx solid #fff; width: 580rpx;border-radius: 50rpx;background-color:transparent;color:#fff;font-weight: 600; "
									type="default">{{btnText}}</button>
							</navigator>
							<view class="item-godetail">了解服务详情></view>
							<text class="icon-reduce-fill"></text>
						</view>
						
					</view>
				</swiper-item>
			</swiper>
		</view>
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view style="height: 360rpx; width: 450rpx; background-image:linear-gradient(to right, #272727, #7b7b7b);">
					<view style="display: flex;padding: 40rpx;height: 100rpx;line-height: 100rpx; padding-top: 30%;">
						<view style="">
							<image style="width: 100rpx;height: 100rpx;border-radius: 50%;" src="../../static/logo.png"
								mode=""></image>

						</view>
						<view style="display: flex;margin-left: 30rpx;">
							<view>
								未认证
							</view>
							<view class="">
								<image style="height: 60rpx;width: 60rpx; padding-left: 30rpx; padding-top: 20rpx;" src="../../static/unverified.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view>

					<uni-list :border="false">
						<navigator url="../order/index" hover-class="navigator-hover">
							<uni-list-item style="margin-left: 60rpx;" title="订单" thumb="/static/order.png"
								thumb-size="sm">
							</uni-list-item>
						</navigator>
						
						<uni-list-item style="margin-left: 60rpx;" title="优惠券" thumb="/static/wdyhq.png"
							thumb-size="sm">
						</uni-list-item>
						<uni-list-item style="margin-left: 60rpx;" title="自助缴费" thumb="/static/zzjf.png"
							thumb-size="sm">
						</uni-list-item>
						<uni-list-item style="margin-left: 60rpx;" title="客服" thumb="/static/server.png"
							thumb-size="sm">
						</uni-list-item>
						<uni-list-item style="margin-left: 60rpx;" title="邀请好友" thumb="/static/share.png"
							thumb-size="sm">
						</uni-list-item>
						<uni-list-item style="margin-left: 60rpx;" title="设置" thumb="/static/setting.png"
							thumb-size="sm">
						</uni-list-item>

					</uni-list>
				</view>

			</view>
		</uni-popup>
		<view style="position: absolute; top: 6%;right: 75%;">
			<button class="nav-btn" type="default" @click="navOpen">导航栏</button>
		</view>
		
		<view style="position: absolute; top: 6%;right: 42%;"> 
		<text style="color: #fff;">{{selectDefultValue}}</text>
		</view>
		<image src="../../static/selectDrop.png" style="position: absolute; top: 100rpx;right: 36%;width: 40rpx; height: 40rpx; "></image>
		
		<view style=" width: 110rpx; position: absolute; top: 30%;right: 20rpx; background-color: rgba(235, 225, 225, 0.5); border: 1rpx solid  rgb(235, 225, 225);  border-radius: 50rpx 50rpx;">
			<scroll-view :scroll-y='true' show-scrollbar="true" >
				<view style="display: flex; flex-direction: column; margin-top: 25rpx;  margin-bottom: 25rpx;">
					<view class="swiper-type" 
					v-for="(item,index) in swiperTypes" :key="index"
					@click="chooseItem(item.CurrenIndex)">
						<view style="height: 35rpx;" :class="item.CurrenIndex===current?'cur':''">●</view>
						<text :class="item.CurrenIndex===current?'cur':''">{{item.CarBrandID}}</text>
					
						
					</view>
					
				</view>
			</scroll-view>
		</view>
		<image @click="redBagOpen" style="position: absolute;top:13%;right:20rpx;width: 110rpx;height: 100rpx;"
			:src="isNew==true?'../../static/new.png':'../../static/old.png'" mode=""></image>
		<uni-popup ref="redBagPopup" :animation="false">
			<view style="display: flex;flex-direction: column;align-items: center;">
				<image style="height: 65vh;border-radius: 10%;" src="@/static/redbag.jpg" @click="redBagClick"></image>
				<view
					style="color: #fff;font-size: 40rpx;text-align: center;border: 1px solid #fff;border-radius: 50%;width: 60rpx;height: 60rpx;line-height: 60rpx;"
					@click="redBagClose">
					X
				</view>
			</view>

		</uni-popup>
	</view>

</template>

<script>
	import homeApi from '@/static/axios/homeApi.js'
	export default {
		data() {
			const ImgBaseUrl = 'https://jrhfin.com/FilesImagDB'
			return {
				isNew:true,
				type:"",
				btnText:"立即订阅",
				selectDefultValue:'广州',
				current: 0,
				duration: 500,
				swiperTypes:[
				],
				swiperList: {
					indexRecarTite: '中奥出行',
					indexReCarSV: '让驾驶回归乐趣',
					//首页网点信息
					indexSiteList: [{
							UID: 1,
							siteName: '广州'
						},
						{
							UID: 2,
							siteName: '深圳'
						},
						{
							UID: 3,
							siteName: '珠海'
						},
					],
					//首页可租赁车辆信息
					imdexAudiCarList: [{
							UID: 1,
							CarBrandID: '奥迪', //车辆品牌
							CarTrain: 'A358855288525555455', //车架号
							CarModelName: 'Q3 e-tron', //车系
							CarModelYear: '2021', //年款
							CarColour: '黄色', //车身颜色
							Displacement: '3.0', //排量
							CarImage: ImgBaseUrl + '/ImagDB/AudiRental/CarBarnImgCS/AudiCar001.png', //车辆图片 
							DateReCar: '560', //日租
							ReCarST: '1', //多少天起租
							ReCarOC: '360', //全方
						},
						{
							UID: 2,
							CarBrandID: '奥迪', //车辆品牌
							CarTrain: 'A00855288525555455', //车架号
							CarModelName: 'QV VO-tron', //车系
							CarModelYear: '2021', //年款
							CarColour: '黄色', //车身颜色
							Displacement: '5.0', //排量
							CarImage: ImgBaseUrl + '/ImagDB/AudiRental/CarBarnImgCS/AudiCar002.png', //车辆图片 
							DateReCar: '590', //日租
							ReCarST: '1', //多少天起租
							ReCarOC: '360', //全方
						},
						{
							UID: 3,
							CarBrandID: '奥迪', //车辆品牌
							CarTrain: 'A358855288523255411', //车架号
							CarModelName: 'Q7 e-uron', //车系
							CarModelYear: '2023', //年款
							CarColour: '银色', //车身颜色
							Displacement: '3.1', //排量
							CarImage: ImgBaseUrl + '/ImagDB/AudiRental/CarBarnImgCS/AudiCar003.png', //车辆图片 
							DateReCar: '360', //日租
							ReCarST: '1', //多少天起租
							ReCarOC: '360', //全方
						},
						{
							UID: 4,
							CarBrandID: '奥迪', //车辆品牌
							CarTrain: 'A3588500525555455', //车架号
							CarModelName: 'Q4 e-tron', //车系
							CarModelYear: '2021', //年款
							CarColour: '黑色', //车身颜色
							Displacement: '3.0', //排量
							CarImage: ImgBaseUrl + '/ImagDB/AudiRental/CarBarnImgCS/AudiCar004.png', //车辆图片 
							DateReCar: '290', //日租
							ReCarST: '1', //多少天起租
							ReCarOC: '360', //全方
						},
						{
							UID: 5,
							CarBrandID: '奥迪', //车辆品牌
							CarTrain: 'A358859925555455', //车架号
							CarModelName: 'Q8 7e-tron', //车系
							CarModelYear: '2021', //年款
							CarColour: '银灰', //车身颜色
							Displacement: '4.1', //排量
							CarImage: ImgBaseUrl + '/ImagDB/AudiRental/CarBarnImgCS/AudiCar005.png', //车辆图片 
							DateReCar: '760', //日租
							ReCarST: '1', //多少天起租
							ReCarOC: '360', //全方
						},
						{
							UID: 6,
							CarBrandID: '特斯拉', //车辆品牌
							CarTrain: 'A358859925555455', //车架号
							CarModelName: 'Q8 7e-tron', //车系
							CarModelYear: '2021', //年款
							CarColour: '银灰', //车身颜色
							Displacement: '4.1', //排量
							CarImage: ImgBaseUrl + '/ImagDB/AudiRental/CarBarnImgCS/AudiCar005.png', //车辆图片 
							DateReCar: '760', //日租
							ReCarST: '1', //多少天起租
							ReCarOC: '360', //全方
						}
					],
				}
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				let beforeData=''
				for (let i=0;  i<this.swiperList.imdexAudiCarList.length;i++) {
					
					if(this.swiperList.imdexAudiCarList[i].CarBrandID!=beforeData)
					{
						beforeData=this.swiperList.imdexAudiCarList[i].CarBrandID
						this.swiperTypes.push({CarBrandID:this.swiperList.imdexAudiCarList[i].CarBrandID,CurrenIndex:i})
					}
				}
				//this.getBackgroundImg();
				
			},
			getBackgroundImg() {
				homeApi.homeImage().then((res) => {
					console.log(res)
				})
			},
			navOpen() {
				this.$refs.popup.open('left')
			},
			redBagOpen() {
				this.$refs.redBagPopup.open('center')
			},
			redBagClick() {
				this.redBagClose()
			},
			redBagClose() {
				this.$refs.redBagPopup.close()
			},
			swiperChange(e) {
				console.log(e.detail.current)
				this.current = e.detail.current
			},
			chooseItem(currenIndex)
			{
				this.current = currenIndex
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
		position: relative;
	}
.cur{
	font-weight: 500;
	font-size: 1.4em;
}
	.nav-btn {
		width: 160rpx;
		border-radius: 50rpx;
		background-color:gray;
		color:#fff; 
		font-size: 20rpx; 
	}

	.home-page-swiper {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	.swiper-type{
		white-space: nowrap;
		display: inline-block;
		margin: 0rpx 20rpx 0rpx 20rpx;
		text-align: center;
		color: #fff;
		font-size: 20rpx;
		font-weight: 200;
	}
	.swiper {
		width: 100%;
		height: 100%;

		.swiper-item {
			width: 100%;
			height: 100%;
			color: #fff;
			display: flex;
			flex-direction: column;
			text-align: center;
			position: relative;
			.item-image {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				image {
					width: 100%;
					height: 100vh;
				}
			}
			.item-top {
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				z-index: 999;
			}
			.item-title {
				font-size: 90rpx;
				letter-spacing: 40rpx;
				font-weight: 700;
				padding-top: 260rpx;
			}

			.item-subTitle {
				font-size: 40rpx;
				letter-spacing: 32rpx;
				margin-top: 40rpx
			}

			.item-carType {
				font-size: 60rpx;
				font-weight: 500;
				padding-top: 440rpx;
				letter-spacing: 10rpx;
			}

			.item-leaseInfo {
				display: flex;
				justify-content: center;
				text-align: center;
				margin-top: 40rpx;

				.item-leaseInfo-item {
					padding: 0rpx 40rpx;
					letter-spacing: 6rpx;

					.lease-item {
						padding: 20rpx 0rpx;
					}
				}

				.item-leaseInfo-itembefore {
					position: relative;
				}

				.item-leaseInfo-itembefore:after {
					content: "";
					width: 2rpx;
					height: 80rpx;
					background: #fff;
					position: absolute;
					top: 50rpx;
					right: 0;
				}
			}

			.item-godetail {
				margin-top: 30rpx;
				font-size: 24rpx;
			}
		}
	}
</style>